import React, { Component } from 'react'
import ReactECharts from 'echarts-for-react';

import { Card, Button } from 'antd'


export default class Line extends Component {

  state = {
    date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    sales: [120, 200, 150, 80, 70, 110, 130],
  }

  getOption = (date, sales) => {
    return {
      xAxis: {
        type: 'category',
        data: date
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: sales,
          type: 'line',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
  }

  update = () => {
    this.setState(state => ({
      date: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      sales: state.sales.map(item => item + 1),
    }))
  }

  render () {
    const { date, sales } = this.state
    return (
      <div>
        <Card>
          <Button type="primary" onClick={this.update}>更新</Button>
        </Card>
        <Card title="折线图">
          <ReactECharts option={this.getOption(date, sales)} />
        </Card>
      </div>
    )
  }
}
